import React from 'react';
import '../css/login.css';
import UserService from '../service/user'
import { Redirect } from 'react-router'
import { observer } from 'mobx-react'
import { message } from 'antd'
import 'antd/lib/message/style'
export default class Login extends React.Component {
    render() {
        return <_Login service={new UserService()} />;
    }
}
@observer
class _Login extends React.Component {
    handleClick(event) {
        event.preventDefault();  //处理页面刷新问题，阻止缺省行为 
        let fm = event.target.form;
        let ret = this.props.service.login(fm[0].value, fm[1].value)  //此处若有返回值，则表明其成功了，当长时间不返回时，其会阻塞
    }
    render() {
        if (this.props.service.loggin) {
            return <Redirect to='/home' />
        }
        if (this.props.service.userMsg) {
            message.error(this.props.service.userMsg, 5, () => this.props.service.userMsg = '')
        }
        return (
            <div className="login-page">
                <div className="form">
                    <form className="login-form">
                        <input type="text" placeholder="邮箱"  />
                        <input type="password" placeholder="密码"   />
                        <button onClick={this.handleClick.bind(this)}>登录</button>
                        <p className="message">未注册<a href="reg"> 注册用户 </a></p>
                    </form>
                </div>
            </div>
        )
    }
}



